<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录 - 物流追踪系统</title>
    <link rel="stylesheet" href="../../css/styles.css">
    <link rel="stylesheet" href="../../css/auth.css">
    <link rel="stylesheet" href="../../css/responsive.css">
    <!-- 本地jQuery -->
    <script src="../../js/lib/jquery-3.6.0.min.js"></script>
    <!-- 工具类和认证服务 -->
    <script src="../../js/utils.js"></script>
    <script src="../../js/auth.js"></script>
</head>
<body>
    <header>
        <div class="container header-container">
            <div class="logo">
                <h1>物流追踪系统</h1>
            </div>
            <nav class="main-nav">
                <ul>
                    <li><a href="../../index.html">首页</a></li>
                    <li><a href="login.html" class="active">登录</a></li>
                    <li><a href="register.html">注册</a></li>
                </ul>
            </nav>
        </div>
    </header>

    <main class="container">
        <div class="auth-container">
            <div class="auth-header">
                <h2>用户登录</h2>
                <p>请输入您的账号和密码</p>
            </div>
            <form id="login-form" class="auth-form">
                <div class="form-group">
                    <label for="username">用户名</label>
                    <input type="text" id="username" name="username" class="form-control" placeholder="请输入用户名">
                    <div class="error-message" id="username-error"></div>
                </div>
                <div class="form-group">
                    <label for="password">密码</label>
                    <input type="password" id="password" name="password" class="form-control" placeholder="请输入密码">
                    <div class="error-message" id="password-error"></div>
                </div>
                <button type="submit" class="btn-primary">登录</button>
                <div class="divider">
                    <span>或</span>
                </div>
                <div class="social-login">
                    <button type="button" class="social-btn google">
                        <i class="fab fa-google"></i> 使用Google登录
                    </button>
                    <button type="button" class="social-btn facebook">
                        <i class="fab fa-facebook"></i> 使用Facebook登录
                    </button>
                </div>
            </form>
            <div class="auth-footer">
                <p>还没有账号？<a href="register.html">立即注册</a></p>
            </div>
        </div>
    </main>

    <footer>
        <div class="container">
            <p>&copy; 2023 物流追踪系统 版权所有</p>
        </div>
    </footer>

    <script>
        // 等待authService和Utils加载完成
        function initLogin() {
            if (window.authService && window.Utils) {
                const authService = window.authService;
                const Utils = window.Utils;

                // 登录表单提交
        document.getElementById('login-form').addEventListener('submit', async (e) => {
            e.preventDefault();

            const username = document.getElementById('username').value.trim();
            const password = document.getElementById('password').value.trim();

            // 简单验证
            let isValid = true;

            if (!username) {
                document.getElementById('username-error').textContent = '请输入用户名';
                document.getElementById('username-error').style.display = 'block';
                isValid = false;
            } else {
                document.getElementById('username-error').style.display = 'none';
            }

            if (!password) {
                document.getElementById('password-error').textContent = '请输入密码';
                document.getElementById('password-error').style.display = 'block';
                isValid = false;
            } else {
                document.getElementById('password-error').style.display = 'none';
            }

            if (isValid) {
                // 调用登录服务
                await authService.login(username, password);
            }
        });

        // 模拟社交媒体登录按钮事件
        document.querySelectorAll('.social-btn').forEach(btn => {
            btn.addEventListener('click', () => {
                const provider = btn.textContent.trim();
                Utils.showNotification(`${provider} 登录功能暂未实现`, 'info');
            });
        });
            }
        }

        // 立即检查是否加载完成
        initLogin();

        // 如果未加载完成，延迟500ms后重试
        if (!window.authService || !window.Utils) {
            setTimeout(initLogin, 500);
        }
    </script>

    <!-- 引入Font Awesome图标库 -->
    <!-- 主CDN链接1 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" onerror="this.onerror=null;this.href='https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css';">
    <!-- 备用CDN链接1 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" onerror="this.onerror=null;this.href='https://unpkg.com/font-awesome@4.7.0/css/font-awesome.min.css';">
    <!-- 备用CDN链接2 -->
    <link rel="stylesheet" href="https://unpkg.com/font-awesome@4.7.0/css/font-awesome.min.css" onerror="this.onerror=null;this.href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css';">
    <!-- 备用CDN链接3 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" onerror="this.onerror=null;console.error('所有Font Awesome CDN链接均无法访问');">
</body>
</html>